<template>
  <div class="login-form-container" @mousemove="handleMouseMove" @mouseleave="handleMouseLeave">
    <!-- 背景星空效果 -->
    <div class="cosmic-background" ref="backgroundRef"></div>
    
    <!-- 表单卡片 -->
    <div class="form-card">
      <!-- 表单头部 -->
      <div class="form-header">
        <div class="logo-container">
          <div class="logo">
            <div class="globe">
              <div class="globe-inner"></div>
              <div class="globe-rings"></div>
            </div>
          </div>
          <h1 class="form-title">星际门户</h1>
          <p class="form-subtitle">探索宇宙的奇妙之旅</p>
        </div>
      </div>
      
      <!-- 表单内容 -->
      <form @submit.prevent="handleSubmit" class="form-content">
        <!-- 用户名/邮箱输入 -->
        <div class="form-group">
          <CosmicInput
            v-model="formData.username"
            label="用户名或邮箱"
            placeholder=""
            :error="errors.username"
            icon
            name="username"
            id="login-username"
          >
            <template #icon>
              <div class="input-icon">👤</div>
            </template>
          </CosmicInput>
        </div>
        
        <!-- 密码输入 -->
        <div class="form-group">
          <CosmicInput
            v-model="formData.password"
            label="密码"
            placeholder=""
            :type="passwordVisible ? 'text' : 'password'"
            :error="errors.password"
            icon
            @input="checkPasswordStrength"
            name="password"
            id="login-password"
          >
            <template #icon>
              <div class="input-icon" @click="togglePasswordVisibility">
                {{ passwordVisible ? '👁️' : '👁️‍🗨️' }}
              </div>
            </template>
          </CosmicInput>
          
          <!-- 密码强度可视化 - 星座图案 -->
          <div v-if="formData.password.length > 0" class="password-strength-container">
            <div class="strength-indicator">
              <div class="constellation-container" :class="`strength-${passwordStrength}`">
                <!-- 星座图案 - 根据强度显示不同的星座 -->
                <div v-if="passwordStrength === 0" class="constellation weak">
                  <div class="constellation-title">北斗七星 (弱)</div>
                  <div class="star star-1"></div>
                  <div class="star star-2"></div>
                  <div class="star star-3"></div>
                </div>
                <div v-else-if="passwordStrength === 1" class="constellation medium">
                  <div class="constellation-title">猎户座 (中)</div>
                  <div class="star star-1"></div>
                  <div class="star star-2"></div>
                  <div class="star star-3"></div>
                  <div class="star star-4"></div>
                  <div class="line line-1-2"></div>
                  <div class="line line-2-3"></div>
                </div>
                <div v-else-if="passwordStrength === 2" class="constellation strong">
                  <div class="constellation-title">天蝎座 (强)</div>
                  <div class="star star-1"></div>
                  <div class="star star-2"></div>
                  <div class="star star-3"></div>
                  <div class="star star-4"></div>
                  <div class="star star-5"></div>
                  <div class="line line-1-2"></div>
                  <div class="line line-2-3"></div>
                  <div class="line line-3-4"></div>
                </div>
                <div v-else-if="passwordStrength === 3" class="constellation very-strong">
                  <div class="constellation-title">天龙座 (非常强)</div>
                  <div class="star star-1"></div>
                  <div class="star star-2"></div>
                  <div class="star star-3"></div>
                  <div class="star star-4"></div>
                  <div class="star star-5"></div>
                  <div class="star star-6"></div>
                  <div class="line line-1-2"></div>
                  <div class="line line-2-3"></div>
                  <div class="line line-3-4"></div>
                  <div class="line line-4-5"></div>
                </div>
              </div>
              <div class="strength-text">{{ passwordStrengthText }}</div>
            </div>
            <div class="strength-tips">{{ passwordTips }}</div>
          </div>
        </div>
        
        <!-- 记住我和忘记密码 -->
        <div class="form-options">
          <label class="remember-me">
            <input 
              type="checkbox" 
              v-model="formData.rememberMe"
              class="custom-checkbox"
            >
            <span class="checkbox-label">记住我</span>
          </label>
          <button 
            type="button" 
            @click="handleForgotPassword"
            class="forgot-password"
          >
            忘记密码？
          </button>
        </div>
        
        <!-- 登录按钮 -->
        <div class="form-group form-group--center">
          <NebulaButton
            :text="isSubmitting ? '登录中...' : '登录'"
            @click="handleSubmit"
            :loading="isSubmitting"
            size="large"
            pulse
            class="login-button"
          />
        </div>
        
        <!-- 注册链接 -->
        <div class="register-link">
          <span>还没有账号？</span>
          <button 
            type="button" 
            @click="handleRegister"
            class="register-button"
          >
            立即注册
          </button>
        </div>
      </form>
    </div>
    
    <!-- 登录成功提示 -->
    <transition name="toast">
      <div v-if="showSuccessToast" class="success-toast">
        <div class="toast-icon">✅</div>
        <div class="toast-content">
          <h4>登录成功！</h4>
          <p>正在为您开启星际之旅...</p>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import * as THREE from 'three'
import CosmicInput from './CosmicInput.vue'
import NebulaButton from './NebulaButton.vue'

export default {
  name: 'LoginForm',
  components: {
    CosmicInput,
    NebulaButton
  },
  emits: ['login-success', 'register', 'forgot-password'],
  setup(props, { emit }) {
    // 表单数据
    const formData = reactive({
      username: '',
      password: '',
      rememberMe: false
    })
    
    // 表单状态
    const errors = reactive({
      username: '',
      password: ''
    })
    
    const isSubmitting = ref(false)
    const passwordVisible = ref(false)
    const showSuccessToast = ref(false)
    
    // 密码强度相关
    const passwordStrength = ref(0) // 0: 弱, 1: 中, 2: 强, 3: 非常强
    const passwordStrengthText = ref('')
    const passwordTips = ref('')
    
    // 背景引用
    const backgroundRef = ref(null)
    const parallaxTarget = reactive({ x: 0, y: 0 })
    
    // Three.js背景相关变量
    let scene = null
    let camera = null
    let renderer = null
    let stars = null
    let starGeometry = null
    let farStarGeometry = null
    let starFieldGroup = null
    let farStars = null
    let animationId = null
    let nebulaMeshes = []
    let milkyWayMesh = null
    let starTexture = null
    
    const autoRotation = { x: 0, y: 0 }
    const STAR_DRIFT_SPEED = 0.18
    const STAR_FIELD_DEPTH = 320
    
    // 表单验证
    const validateForm = () => {
      let isValid = true
      
      // 重置错误
      errors.username = ''
      errors.password = ''
      
      // 验证用户名/邮箱
      if (!formData.username.trim()) {
        errors.username = '请输入用户名或邮箱'
        isValid = false
      } else if (!isValidEmail(formData.username) && formData.username.length < 3) {
        errors.username = '用户名至少需要3个字符或请输入有效的邮箱地址'
        isValid = false
      }
      
      // 验证密码
      if (!formData.password) {
        errors.password = '请输入密码'
        isValid = false
      } else if (formData.password.length < 6) {
        errors.password = '密码至少需要6个字符'
        isValid = false
      }
      
      return isValid
    }
    
    // 邮箱格式验证
    const isValidEmail = (email) => {
      const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
      return re.test(email)
    }
    
    // 切换密码可见性
    const togglePasswordVisibility = () => {
      passwordVisible.value = !passwordVisible.value
    }
    
    // 检查密码强度
    const checkPasswordStrength = () => {
      const password = formData.password
      let strength = 0
      let tips = []
      
      // 重置强度
      passwordStrength.value = 0
      passwordStrengthText.value = ''
      passwordTips.value = ''
      
      if (!password) return
      
      // 长度检查
      if (password.length >= 8) {
        strength++
        tips.push('✓ 长度合适')
      } else {
        tips.push('✗ 长度至少8个字符')
      }
      
      // 包含小写字母
      if (/[a-z]/.test(password)) {
        strength++
        tips.push('✓ 包含小写字母')
      } else {
        tips.push('✗ 建议包含小写字母')
      }
      
      // 包含大写字母或数字
      if (/[A-Z]/.test(password) || /[0-9]/.test(password)) {
        strength++
        tips.push('✓ 包含大写字母或数字')
      } else {
        tips.push('✗ 建议包含大写字母或数字')
      }
      
      // 包含特殊字符
      if (/[^A-Za-z0-9]/.test(password)) {
        strength++
        tips.push('✓ 包含特殊字符')
      } else {
        tips.push('✗ 建议包含特殊字符')
      }
      
      // 设置密码强度
      passwordStrength.value = Math.min(3, Math.floor((strength - 1) / 1))
      
      // 设置强度文本
      const strengthTexts = ['弱', '中', '强', '非常强']
      passwordStrengthText.value = `密码强度: ${strengthTexts[passwordStrength.value]}`
      
      // 设置提示文本
      passwordTips.value = tips.join(' | ')
    }
    
    // 处理表单提交
    const handleSubmit = async () => {
      // 验证表单
      if (!validateForm()) {
        // 显示错误动画
        shakeForm()
        return
      }
      
      // 显示加载状态
      isSubmitting.value = true
      
      try {
        // 模拟登录请求
        await new Promise(resolve => setTimeout(resolve, 1500))
        
        // 登录成功
        showSuccessToast.value = true
        
        // 发送成功事件
        emit('login-success', {
          username: formData.username,
          rememberMe: formData.rememberMe
        })
        
        // 3秒后隐藏提示
        setTimeout(() => {
          showSuccessToast.value = false
        }, 3000)
        
      } catch (error) {
        console.error('登录失败:', error)
        // 这里可以添加错误处理逻辑
        errors.general = '登录失败，请重试'
      } finally {
        // 隐藏加载状态
        setTimeout(() => {
          isSubmitting.value = false
        }, 500)
      }
    }
    
    // 表单错误抖动动画
    const shakeForm = () => {
      const formCard = document.querySelector('.form-card')
      if (formCard) {
        formCard.classList.add('shake')
        setTimeout(() => {
          formCard.classList.remove('shake')
        }, 500)
      }
    }
    
    // 处理忘记密码
    const handleForgotPassword = () => {
      emit('forgot-password')
      // 这里可以添加忘记密码的逻辑
    }
    
    // 处理注册
    const handleRegister = () => {
      emit('register')
      // 这里可以添加注册的逻辑
    }
    
    // 鼠标视差效果
    const handleMouseMove = (event) => {
      if (!backgroundRef.value) return
      const rect = backgroundRef.value.getBoundingClientRect()
      const xRatio = (event.clientX - rect.left) / rect.width || 0
      const yRatio = (event.clientY - rect.top) / rect.height || 0
      parallaxTarget.x = (xRatio - 0.5) * 2
      parallaxTarget.y = (yRatio - 0.5) * 2
    }

    const handleMouseLeave = () => {
      parallaxTarget.x = 0
      parallaxTarget.y = 0
    }
    
    // 创建星云层
    const createNebula = () => {
      if (!starFieldGroup) return

      // 清理旧星云
      nebulaMeshes.forEach(nebula => {
        starFieldGroup.remove(nebula)
        nebula.geometry?.dispose()
        nebula.material?.dispose()
      })
      nebulaMeshes = []

      const nebulaConfigs = [
        { color: 0x4e7bff, radius: 60, opacity: 0.22 },
        { color: 0xffa07a, radius: 75, opacity: 0.17 },
        { color: 0x9d5bff, radius: 90, opacity: 0.15 }
      ]

      nebulaConfigs.forEach(config => {
        const geometry = new THREE.CircleGeometry(
          config.radius + Math.random() * 30,
          48
        )
        const material = new THREE.MeshBasicMaterial({
          color: config.color,
          transparent: true,
          opacity: config.opacity,
          blending: THREE.AdditiveBlending,
          side: THREE.DoubleSide
        })
        const nebula = new THREE.Mesh(geometry, material)
        nebula.position.set(
          (Math.random() - 0.5) * 180,
          (Math.random() - 0.5) * 140,
          -30 - Math.random() * 80
        )
        nebula.rotation.z = Math.random() * Math.PI
        nebula.scale.setScalar(0.8 + Math.random() * 0.7)
        starFieldGroup.add(nebula)
        nebulaMeshes.push(nebula)
      })
    }
    
    // 创建背景星空
    const createBackground = () => {
      if (!backgroundRef.value) return
      
      const rect = backgroundRef.value.getBoundingClientRect()
      
      // 创建场景
      scene = new THREE.Scene()
      scene.background = new THREE.Color(0x03040c)
      starFieldGroup = new THREE.Group()
      scene.add(starFieldGroup)
      
      // 创建透视相机
      camera = new THREE.PerspectiveCamera(
        75,
        rect.width / rect.height,
        0.1,
        1000
      )
      camera.position.z = 30
      
      // 创建渲染器
      renderer = new THREE.WebGLRenderer({ antialias: true })
      renderer.setSize(rect.width, rect.height)
      renderer.setPixelRatio(window.devicePixelRatio)
      renderer.setClearColor(0x010207, 1)
      renderer.domElement.style.position = 'absolute'
      renderer.domElement.style.top = '0'
      renderer.domElement.style.left = '0'
      renderer.domElement.style.pointerEvents = 'none'
      
      backgroundRef.value.appendChild(renderer.domElement)
      
      // 创建多层星空
      const farLayer = createStarLayer({
        count: 2500,
        spread: 460,
        depthRange: [-520, -260],
        size: 0.9,
        opacity: 0.55
      })
      farStarGeometry = farLayer.geometry
      farStars = farLayer.points
      starFieldGroup.add(farStars)

      const nearLayer = createStarLayer({
        count: 3600,
        spread: 320,
        depthRange: [-260, -60],
        size: 1.35,
        opacity: 0.85
      })
      starGeometry = nearLayer.geometry
      stars = nearLayer.points
      starFieldGroup.add(stars)

      if (!milkyWayMesh) {
        milkyWayMesh = createMilkyWayBand()
      }
      starFieldGroup.add(milkyWayMesh)
      
      // 创建星云效果（使用粒子系统）
      createNebula()
      
      // 开始动画
      animate()
    }
    
    // 动画循环
    const animate = () => {
      animationId = requestAnimationFrame(animate)
      
      if (starFieldGroup) {
        autoRotation.x += 0.00045
        autoRotation.y += 0.00055
        const targetRotX = autoRotation.x + parallaxTarget.y * 0.35
        const targetRotY = autoRotation.y + parallaxTarget.x * 0.35
        starFieldGroup.rotation.x += (targetRotX - starFieldGroup.rotation.x) * 0.08
        starFieldGroup.rotation.y += (targetRotY - starFieldGroup.rotation.y) * 0.08
      }
      
      if (starGeometry) {
        const positionAttr = starGeometry.attributes.position
        for (let i = 0; i < positionAttr.count; i++) {
          const zIndex = i * 3 + 2
          positionAttr.array[zIndex] += STAR_DRIFT_SPEED
          if (positionAttr.array[zIndex] > -40) {
            positionAttr.array[zIndex] = -STAR_FIELD_DEPTH + Math.random() * -60
          }
        }
        positionAttr.needsUpdate = true
      }

      // 旋转星星
      if (stars) {
        // 星星闪烁效果
        if (Math.random() > 0.995) {
          const sizeAttribute = stars.geometry.attributes.size
          const index = Math.floor(Math.random() * sizeAttribute.count)
          const originalSize = sizeAttribute.array[index]
          sizeAttribute.array[index] = originalSize * (0.5 + Math.random() * 1.5)
          sizeAttribute.needsUpdate = true
          
          // 恢复原始大小
          setTimeout(() => {
            if (sizeAttribute) {
              sizeAttribute.array[index] = originalSize
              sizeAttribute.needsUpdate = true
            }
          }, 100 + Math.random() * 300)
        }
      }
      
      if (camera && scene) {
        const targetX = parallaxTarget.x * 12
        const targetY = parallaxTarget.y * 12
        camera.position.x += (targetX - camera.position.x) * 0.05
        camera.position.y += (-targetY - camera.position.y) * 0.05
        camera.lookAt(scene.position)
      }

      if (milkyWayMesh && milkyWayMesh.material) {
        const pulse = 0.26 + Math.sin(Date.now() * 0.0002) * 0.04
        milkyWayMesh.material.opacity = pulse
      }
      
      // 渲染
      if (renderer && scene && camera) {
        renderer.render(scene, camera)
      }
    }
    
    // 调整大小
    const handleResize = () => {
      if (!backgroundRef.value || !renderer || !camera) return
      
      const rect = backgroundRef.value.getBoundingClientRect()
      
      camera.aspect = rect.width / rect.height
      camera.updateProjectionMatrix()
      
      renderer.setSize(rect.width, rect.height)
    }
    
    // 组件挂载
    onMounted(() => {
      // 延迟创建背景，确保DOM已渲染
      setTimeout(() => {
        createBackground()
      }, 100)
      
      // 监听窗口大小变化
      window.addEventListener('resize', handleResize)
      
      // 如果有保存的用户信息，可以在这里恢复
      // 例如从localStorage读取
    })
    
    // 组件卸载
    onUnmounted(() => {
      // 清理动画
      if (animationId) {
        cancelAnimationFrame(animationId)
      }
      
      // 移除事件监听器
      window.removeEventListener('resize', handleResize)
      
      // 清理Three.js资源
      if (renderer) {
        renderer.dispose()
        if (backgroundRef.value && renderer.domElement) {
          backgroundRef.value.removeChild(renderer.domElement)
        }
      }
      nebulaMeshes.forEach(nebula => {
        starFieldGroup?.remove(nebula)
        nebula.geometry?.dispose()
        nebula.material?.dispose()
      })
      nebulaMeshes = []
      if (milkyWayMesh) {
        starFieldGroup?.remove(milkyWayMesh)
        milkyWayMesh.geometry?.dispose()
        milkyWayMesh.material?.dispose()
        milkyWayMesh = null
      }
      if (farStars) {
        starFieldGroup?.remove(farStars)
        farStars.material?.dispose()
        farStars = null
      }
      if (farStarGeometry) {
        farStarGeometry.dispose()
        farStarGeometry = null
      }
      if (starGeometry) {
        starGeometry.dispose()
        starGeometry = null
      }
      starFieldGroup = null
    })
    
    // 确保星星纹理
    const ensureStarTexture = () => {
      if (starTexture) return starTexture
      const size = 128
      const canvas = document.createElement('canvas')
      canvas.width = canvas.height = size
      const ctx = canvas.getContext('2d')
      const gradient = ctx.createRadialGradient(size / 2, size / 2, 0, size / 2, size / 2, size / 2)
      gradient.addColorStop(0, 'rgba(255,255,255,0.95)')
      gradient.addColorStop(0.4, 'rgba(255,255,255,0.55)')
      gradient.addColorStop(1, 'rgba(255,255,255,0)')
      ctx.fillStyle = gradient
      ctx.fillRect(0, 0, size, size)
      starTexture = new THREE.CanvasTexture(canvas)
      starTexture.needsUpdate = true
      return starTexture
    }

    // 生成星星颜色
    const generateStarColor = () => {
      const palette = [
        { weight: 0.6, color: [0.92, 0.95, 1.0], variance: 0.04 }, // cool white
        { weight: 0.25, color: [0.78, 0.85, 1.0], variance: 0.07 }, // icy blue
        { weight: 0.15, color: [1.0, 0.88, 0.74], variance: 0.06 } // warm yellow
      ]
      const rand = Math.random()
      let cumulative = 0
      let picked = palette[0]
      for (const entry of palette) {
        cumulative += entry.weight
        if (rand <= cumulative) {
          picked = entry
          break
        }
      }
      return picked.color.map(channel => Math.min(1, Math.max(0.65, channel + (Math.random() - 0.5) * picked.variance)))
    }

    // 创建星星层
    const createStarLayer = ({ count, spread, depthRange, size, opacity }) => {
      const geometry = new THREE.BufferGeometry()
      const positions = new Float32Array(count * 3)
      const colors = new Float32Array(count * 3)
      for (let i = 0; i < count; i++) {
        const i3 = i * 3
        positions[i3] = (Math.random() - 0.5) * spread
        positions[i3 + 1] = (Math.random() - 0.5) * spread * 0.7
        positions[i3 + 2] = depthRange[0] - Math.random() * (depthRange[0] - depthRange[1])
        const [r, g, b] = generateStarColor()
        colors[i3] = r
        colors[i3 + 1] = g
        colors[i3 + 2] = b
      }
      geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3))
      geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3))
      const material = new THREE.PointsMaterial({
        size,
        map: ensureStarTexture(),
        transparent: true,
        opacity,
        vertexColors: true,
        sizeAttenuation: true,
        depthWrite: false,
        blending: THREE.AdditiveBlending
      })
      const points = new THREE.Points(geometry, material)
      return { geometry, points }
    }

    // 创建银河系
    const createMilkyWayBand = () => {
      const canvas = document.createElement('canvas')
      canvas.width = 512
      canvas.height = 256
      const ctx = canvas.getContext('2d')
      const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height)
      gradient.addColorStop(0, 'rgba(80, 110, 255, 0.08)')
      gradient.addColorStop(0.5, 'rgba(255, 255, 255, 0.18)')
      gradient.addColorStop(1, 'rgba(200, 140, 255, 0.08)')
      ctx.fillStyle = gradient
      ctx.fillRect(0, 0, canvas.width, canvas.height)
      const texture = new THREE.CanvasTexture(canvas)
      texture.needsUpdate = true
      const geometry = new THREE.PlaneGeometry(650, 220)
      const material = new THREE.MeshBasicMaterial({
        map: texture,
        transparent: true,
        opacity: 0.32,
        blending: THREE.AdditiveBlending,
        depthWrite: false
      })
      const mesh = new THREE.Mesh(geometry, material)
      mesh.position.set(0, -10, -180)
      mesh.rotation.set(Math.PI / 12, Math.PI / 20, Math.PI / 7)
      return mesh
    }
    
    return {
      formData,
      errors,
      isSubmitting,
      passwordVisible,
      showSuccessToast,
      backgroundRef,
      passwordStrength,
      passwordStrengthText,
      passwordTips,
      togglePasswordVisibility,
      checkPasswordStrength,
      handleSubmit,
      handleForgotPassword,
      handleRegister,
      handleMouseMove,
      handleMouseLeave
    }
  }
}
</script>

<style scoped>
.login-form-container {
  position: relative;
  min-height: 100vh;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  overflow: hidden;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  background: radial-gradient(circle at top, rgba(40, 60, 120, 0.35), transparent 55%);
}

.cosmic-background {
  position: absolute;
  inset: -80px;
  z-index: 0;
  filter: drop-shadow(0 0 35px rgba(80, 140, 255, 0.25));
}

.cosmic-background::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(80, 120, 255, 0.25), transparent 45%),
    radial-gradient(circle at 80% 30%, rgba(255, 160, 120, 0.18), transparent 55%),
    linear-gradient(135deg, rgba(10, 10, 42, 0.55), rgba(5, 5, 24, 0.25));
  mix-blend-mode: screen;
  pointer-events: none;
}

.form-card {
  position: relative;
  width: 100%;
  min-width: 320px;
  max-width: 420px;
  min-height: 500px;
  background: rgba(10, 10, 42, 0.85);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  border: 1px solid rgba(85, 136, 255, 0.2);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  z-index: 1;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.form-card:hover {
  box-shadow: 0 25px 80px rgba(85, 136, 255, 0.3);
}

.form-card.shake {
  animation: shake 0.5s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.form-header {
  text-align: center;
  padding: 30px 20px 20px;
  border-bottom: 1px solid rgba(85, 136, 255, 0.1);
}

.logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}

.globe {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e3a8a, #3b82f6);
  box-shadow: 0 0 30px rgba(59, 130, 246, 0.5);
  animation: rotate 20s linear infinite;
}

.globe-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e40af, #3b82f6, #93c5fd);
  opacity: 0.7;
}

.globe-rings {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 30%;
  border: 2px solid rgba(59, 130, 246, 0.5);
  border-radius: 50%;
  opacity: 0.7;
}

.globe-rings::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 120%;
  height: 30%;
  border: 2px solid rgba(59, 130, 246, 0.3);
  border-radius: 50%;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.form-title {
  margin: 0 0 5px;
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(85, 136, 255, 0.5);
}

.form-subtitle {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}

.form-content {
  padding: 30px 25px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group--center {
  display: flex;
  justify-content: center;
}

.input-icon {
  font-size: 18px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

/* 密码强度可视化样式 */
.password-strength-container {
  margin-top: 10px;
  padding: 12px;
  background: rgba(10, 10, 42, 0.6);
  border-radius: 8px;
  border: 1px solid rgba(85, 136, 255, 0.2);
}

.strength-indicator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.constellation-container {
  position: relative;
  width: 120px;
  height: 60px;
  overflow: hidden;
}

.constellation {
  position: relative;
  width: 100%;
  height: 100%;
}

.constellation-title {
  position: absolute;
  top: -15px;
  left: 0;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  width: 100%;
}

.star {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 6px 2px white;
  animation: twinkle 2s infinite alternate;
}

/* 星座连线 */
.line {
  position: absolute;
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
  transform-origin: 0 0;
}

/* 弱密码 - 北斗七星 */
.constellation.weak .star-1 {
  top: 20px;
  left: 20px;
  animation-delay: 0.1s;
}

.constellation.weak .star-2 {
  top: 10px;
  left: 40px;
  animation-delay: 0.2s;
}

.constellation.weak .star-3 {
  top: 15px;
  left: 60px;
  animation-delay: 0.3s;
}

/* 中等密码 - 猎户座 */
.constellation.medium .star-1 {
  top: 20px;
  left: 15px;
  animation-delay: 0.1s;
}

.constellation.medium .star-2 {
  top: 10px;
  left: 40px;
  animation-delay: 0.2s;
}

.constellation.medium .star-3 {
  top: 20px;
  left: 65px;
  animation-delay: 0.3s;
}

.constellation.medium .star-4 {
  top: 35px;
  left: 40px;
  animation-delay: 0.4s;
}

.constellation.medium .line-1-2 {
  top: 10px;
  left: 15px;
  width: 25px;
  transform: rotate(-25deg);
}

.constellation.medium .line-2-3 {
  top: 10px;
  left: 40px;
  width: 25px;
  transform: rotate(25deg);
}

/* 强密码 - 天蝎座 */
.constellation.strong .star-1 {
  top: 20px;
  left: 10px;
  animation-delay: 0.1s;
}

.constellation.strong .star-2 {
  top: 15px;
  left: 30px;
  animation-delay: 0.2s;
}

.constellation.strong .star-3 {
  top: 10px;
  left: 50px;
  animation-delay: 0.3s;
}

.constellation.strong .star-4 {
  top: 25px;
  left: 40px;
  animation-delay: 0.4s;
}

.constellation.strong .star-5 {
  top: 35px;
  left: 60px;
  animation-delay: 0.5s;
}

.constellation.strong .line-1-2 {
  top: 20px;
  left: 10px;
  width: 20px;
  transform: rotate(-15deg);
}

.constellation.strong .line-2-3 {
  top: 15px;
  left: 30px;
  width: 20px;
  transform: rotate(-15deg);
}

.constellation.strong .line-3-4 {
  top: 10px;
  left: 50px;
  width: 20px;
  transform: rotate(45deg);
}

/* 非常强密码 - 天龙座 */
.constellation.very-strong .star-1 {
  top: 10px;
  left: 10px;
  animation-delay: 0.1s;
}

.constellation.very-strong .star-2 {
  top: 15px;
  left: 30px;
  animation-delay: 0.2s;
}

.constellation.very-strong .star-3 {
  top: 5px;
  left: 50px;
  animation-delay: 0.3s;
}

.constellation.very-strong .star-4 {
  top: 20px;
  left: 70px;
  animation-delay: 0.4s;
}

.constellation.very-strong .star-5 {
  top: 30px;
  left: 50px;
  animation-delay: 0.5s;
}

.constellation.very-strong .star-6 {
  top: 25px;
  left: 30px;
  animation-delay: 0.6s;
}

.constellation.very-strong .line-1-2 {
  top: 10px;
  left: 10px;
  width: 20px;
  transform: rotate(15deg);
}

.constellation.very-strong .line-2-3 {
  top: 15px;
  left: 30px;
  width: 20px;
  transform: rotate(-30deg);
}

.constellation.very-strong .line-3-4 {
  top: 5px;
  left: 50px;
  width: 20px;
  transform: rotate(15deg);
}

.constellation.very-strong .line-4-5 {
  top: 20px;
  left: 70px;
  width: 20px;
  transform: rotate(-45deg);
}

/* 星座闪烁动画 */
@keyframes twinkle {
  0% {
    opacity: 0.6;
    box-shadow: 0 0 4px 1px white;
  }
  100% {
    opacity: 1;
    box-shadow: 0 0 8px 3px white;
  }
}

/* 强度文本 */
.strength-text {
  font-size: 12px;
  font-weight: 600;
}

.strength-0 .strength-text {
  color: #ff6b6b;
}

.strength-1 .strength-text {
  color: #feca57;
}

.strength-2 .strength-text {
  color: #48dbfb;
}

.strength-3 .strength-text {
  color: #1dd1a1;
}

/* 强度提示 */
.strength-tips {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.4;
}

/* 响应式调整 */
@media (max-width: 480px) {
  .strength-indicator {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .constellation-container {
    margin-bottom: 8px;
  }
  
  .strength-text {
    margin-bottom: 4px;
  }
}

.input-icon:hover {
  transform: scale(1.1);
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.remember-me {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.custom-checkbox {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  cursor: pointer;
  accent-color: #5588ff;
  border: 1px solid #5588ff;
}

.checkbox-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

.forgot-password {
  background: none;
  border: none;
  color: #5588ff;
  font-size: 14px;
  cursor: pointer;
  transition: color 0.2s ease;
  padding: 0;
}

.forgot-password:hover {
  color: #7aa5ff;
  text-decoration: underline;
}

.login-button {
  display: inline-flex;
  justify-content: center;
  width: auto;
  min-width: 60%;
  margin: 0 auto;
}

.register-link {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}

.register-button {
  background: none;
  border: none;
  color: #5588ff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s ease;
  padding: 0;
  margin-left: 5px;
}

.register-button:hover {
  color: #7aa5ff;
  text-decoration: underline;
}

/* 成功提示 */
.success-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  background: rgba(34, 197, 94, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(34, 197, 94, 0.5);
  border-radius: 12px;
  padding: 15px 20px;
  box-shadow: 0 10px 30px rgba(34, 197, 94, 0.4);
  z-index: 1000;
  max-width: 300px;
}

.toast-icon {
  font-size: 24px;
  margin-right: 15px;
}

.toast-content h4 {
  margin: 0 0 5px;
  color: white;
  font-size: 16px;
}

.toast-content p {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
}

/* 动画效果 */
.toast-enter-active,
.toast-leave-active {
  transition: all 0.3s ease;
}

.toast-enter-from {
  transform: translateX(100%);
  opacity: 0;
}

.toast-leave-to {
  transform: translateX(100%);
  opacity: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .login-form-container {
    padding: 20px 10px;
    height: 100vh;
  }
  
  .form-card {
    width: 100%;
    max-width: 100%;
    min-width: 280px;
    min-height: 450px;
    margin: 0 10px;
  }
  
  .form-header {
    padding: 25px 20px 20px;
  }
  
  .form-content {
    padding: 25px 20px;
  }
  
  .form-title {
    font-size: 26px;
  }
  
  .logo {
    width: 70px;
    height: 70px;
    margin-bottom: 12px;
  }
  
  .globe {
    width: 55px;
    height: 55px;
  }
  
  .success-toast {
    left: 20px;
    right: 20px;
    max-width: none;
  }
}

@media (max-width: 480px) {
  .login-form-container {
    padding: 15px 10px;
  }
  
  .form-card {
    min-width: 260px;
    min-height: 420px;
  }
  
  .form-header {
    padding: 20px 15px 15px;
  }
  
  .form-content {
    padding: 20px 15px;
  }
}
</style>